<template>
  <div class="app-container">
<!--    <el-form :inline="true" :model="searchFrom" class="demo-form-inline" size="small">-->
<!--      <el-form-item>-->
<!--        <el-input v-model="searchFrom.number" placeholder="用户编号"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="searchFrom.name" placeholder="用户名称"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="onSearch">查询</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="80" prop="id"/>
      <el-table-column label="照片" width="110" align="center">
        <template slot-scope="scope">
          <el-avatar shape="square" :size="40" fit="fit" :src="scope.row.shopPhoto"/>
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" align="center" prop="shopName"/>
      <el-table-column class-name="status-col" label="手机号" align="center" prop="shopPhone"/>
      <el-table-column label="地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.provinceName }} {{ scope.row.cityName }} {{ scope.row.region }} {{ scope.row.detailAddress }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="可用优惠券" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.couponNum }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="信用指数" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.creditIndex }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="邀请码" align="center" prop="shopCode" width="100"/>
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-pagination">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevChange"
        @next-click="handleNextChange"
      />
    </div>
  </div>
</template>

<script>

import { getSmsShopList } from '@/api/Shop'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        '男': 'success',
        '女': 'danger'
      }
      return statusMap[status]
    }, categoryFilter(status) {
      const statusMap = {
        '0': '个人',
        '1': '餐馆'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      searchFrom: {
        name: '',
        number: '',
        email: ''
      },
      list: null,
      listLoading: true,
      total: 0,
      limit: 10,
      page: 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const searchParams = this.searchFrom
      searchParams['page'] = this.page
      searchParams['limit'] = this.limit
      getSmsShopList(searchParams).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    onSearch() {
      this.fetchData()
    },
    /* 上一页*/
    handlePrevChange(event) {
      this.page = event
      this.fetchData()
    },
    /* 下一页*/
    handleNextChange(event) {
      this.page = event
      this.fetchData()
    },
    /* 数字点击*/
    handleCurrentChange(event) {
      this.page = event
      this.fetchData()
    },
    handleSizeChange(event) {
      this.limit = event
      this.fetchData()
    },
    edit(event) {
      this.$router.push({
        path: '/user/create',
        query: {
          userId: event.userId
        }
      })
    },
    deleteUser(event) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // eslint-disable-next-line no-undef
        deleteUser({ userId: event.userId }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.fetchData()
          } else {
            this.$message.error('网络错误')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    blocking(event) {
      this.$confirm('此操作将冻结该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userBlock({ userId: event.userId }).then(res => {
          if (res.code === 200) {
            this.$message.success('冻结成功')
            this.fetchData()
          } else {
            this.$message.error('网络错误')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    cancelBlocking(event) {
      this.$confirm('此操作将解冻该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userCancelBlock({ userId: event.userId }).then(res => {
          if (res.code === 200) {
            this.$message.success('解冻成功')
            this.fetchData()
          } else {
            this.$message.error('网络错误')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    updatePassword(event) {
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'password'
      }).then(({ value }) => {
        // eslint-disable-next-line no-undef
        userUpdatePassword({ userId: event.userId, password: md5(value) }).then(res => {
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.fetchData()
          } else {
            this.$message.error('网络错误')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    create() {
      this.$router.push('/user/create')
    }
  }
}
</script>
